<?php
	require_once("modules.php");
?>
<!DOCTYPE HTML>
<html>
<head>
  <title>Compare landscapes on Earth and Mars</title>
  
	<link href="styles/style.css" type="text/css" rel="stylesheet" />
	<link href='http://fonts.googleapis.com/css?family=Squada+One|Changa+One|Geo|Righteous|Aldrich' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=weather"></script>

	<script type="text/javascript" src="geometa.js"></script>
	<style type="text/css">
	  *, html { margin:0; padding:0 }
	  div#map_canvas { width:100%; height:100%; }
	  .lightBox {
		filter:alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
		background-color:white;
		padding:2px;
	  }
	</style>

  <script type="text/javascript">
    var mapTypes = {};
 
    // set up the map types
    mapTypes['moon'] = {
      getTileUrl: function(coord, zoom) {
        return getHorizontallyRepeatingTileUrl(coord, zoom, function(coord, zoom) {
          var bound = Math.pow(2, zoom);
          return "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/" +
                 + zoom + "/" + coord.x + "/" + (bound - coord.y - 1) + '.jpg';
        });
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: false,
      maxZoom: 9,
      minZoom: 0,
      radius: 1738000,
      name: 'Moon',
      credit: ''
    };
 
    mapTypes['sky'] = {
      getTileUrl: function(coord, zoom) {
        return getHorizontallyRepeatingTileUrl(coord, zoom, function(coord, zoom) {
          return "http://mw1.google.com/mw-planetary/sky/skytiles_v1/" +
                 coord.x + "_" + coord.y + '_' + zoom + '.jpg';
 
        });
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: false,
      maxZoom: 13,
      radius: 57.2957763671875,
      name: 'Sky',
      credit: 'Image Credit: SDSS, DSS Consortium, NASA/ESA/STScI'
    };
 
    mapTypes['mars_elevation'] = {
      getTileUrl: function(coord, zoom) {
        return getHorizontallyRepeatingTileUrl(coord, zoom, function(coord, zoom) {
          return getMarsTileUrl("http://mw1.google.com/mw-planetary/mars/elevation/", coord, zoom);
        });
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: false,
      maxZoom: 8,
      radius: 3396200,
      name: 'Mars Elevation',
      credit: 'Image Credit: NASA/JPL/GSFC'
    };
 
    mapTypes['mars_visible'] = {
      getTileUrl: function(coord, zoom) {
        return getHorizontallyRepeatingTileUrl(coord, zoom, function(coord, zoom) {
          return getMarsTileUrl("http://mw1.google.com/mw-planetary/mars/visible/", coord, zoom);
        });
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: false,
      maxZoom: 9,
      radius: 3396200,
      name: 'Mars Map',
      credit: ''
    };
 
    mapTypes['mars_infrared'] = {
      getTileUrl: function(coord, zoom) {
        return getHorizontallyRepeatingTileUrl(coord, zoom, function(coord, zoom) {
          return getMarsTileUrl("http://mw1.google.com/mw-planetary/mars/infrared/", coord, zoom);
        });
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: false,
      maxZoom: 9,
      radius: 3396200,
      name: 'Mars Infrared',
      credit: 'Image Credit: NASA/JPL/ASU'
    };
 
    // Normalizes the tile URL so that tiles repeat across the x axis (horizontally) like the
    // standard Google map tiles.
    function getHorizontallyRepeatingTileUrl(coord, zoom, urlfunc) {
      var y = coord.y;
      var x = coord.x;
 
      // tile range in one direction range is dependent on zoom level
      // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
      var tileRange = 1 << zoom;
 
      // don't repeat across y-axis (vertically)
      if (y < 0 || y >= tileRange) {
        return null;
      }
 
      // repeat across x-axis
      if (x < 0 || x >= tileRange) {
        x = (x % tileRange + tileRange) % tileRange;
      }
 
      return urlfunc({x:x,y:y}, zoom)
    }
 
    function getMarsTileUrl(baseUrl, coord, zoom) {
      var bound = Math.pow(2, zoom);
      var x = coord.x;
      var y = coord.y;
      var quads = ['t'];
 
      for (var z = 0; z < zoom; z++) {
        bound = bound / 2;
        if (y < bound) {
          if (x < bound) {
            quads.push('q');
          } else {
            quads.push('r');
            x -= bound;
          }
        } else {
          if (x < bound) {
            quads.push('t');
            y -= bound;
          } else {
            quads.push('s');
            x -= bound;
            y -= bound;
          }
        }
      }
 
      return baseUrl + quads.join('') + ".jpg";
    }
 
    var map;
    var mapTypeIds = [];
 
    // Setup a copyright/credit line, emulating the standard Google style
    var creditNode = document.createElement('div');
    creditNode.id = 'credit-control';
    creditNode.style.fontSize = '11px';
    creditNode.style.fontFamily = 'Arial, sans-serif';
    creditNode.style.margin = '0 2px 2px 0';
    creditNode.style.whitespace = 'nowrap';
    creditNode.index = 0;
 
    function setCredit(credit) {
      creditNode.innerHTML = credit + ' -';
    }
 
    function initialize() {
 
      // push all mapType keys in to a mapTypeId array to set in the mapTypeControlOptions
      for (var key in mapTypes) {
		  if(key!="moon"&&key!="sky"&&key!="mars_elevation"&&key!="mars_infrared")
        mapTypeIds.push(key);
      }
 
      var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(43.1546, 25.1439),
        mapTypeControlOptions: {
          mapTypeIds: mapTypeIds
        }
      };
      map = new google.maps.Map(document.getElementById("mars_canvas"), mapOptions);
 
      // push the credit/copyright custom control
      map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(creditNode);
 
      // add the new map types to map.mapTypes
      for (key in mapTypes) {
        map.mapTypes.set(key, new google.maps.ImageMapType(mapTypes[key]));
      }
 
      // handle maptypeid_changed event to set the credit line
      google.maps.event.addListener(map, 'maptypeid_changed', function() {
        setCredit(mapTypes[map.getMapTypeId()].credit);
      });
 
      // start with the moon map type
      map.setMapTypeId('mars_visible');
    }
 
  </script><script type="text/javascript">
  var map;
  function initialise() {
    var latlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      disableDefaultUI: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
    prepareGeolocation();
    doGeolocation();
	var weatherLayer = new google.maps.weather.WeatherLayer({
    temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
  });
  weatherLayer.setMap(map);
  }/*
  var cloudLayer = new google.maps.weather.CloudLayer();
  cloudLayer.setMap(map);
  }
*/
  function doGeolocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
    } else {
      positionError(-1);
    }
  }

  function positionError(err) {
    var msg;
    switch(err.code) {
      case err.UNKNOWN_ERROR:
        msg = "Unable to find your location";
        break;
      case err.PERMISSION_DENINED:
        msg = "Permission denied in finding your location";
        break;
      case err.POSITION_UNAVAILABLE:
        msg = "Your location is currently unknown";
        break;
      case err.BREAK:
        msg = "Attempt to find location took too long";
        break;
      default:
        msg = "Location detection not supported in browser";
    }
  }

  function positionSuccess(position) {
    // Centre the map on the new location
    var coords = position.coords || position.coordinate || position;
    var latLng = new google.maps.LatLng(coords.latitude, coords.longitude);
    map.setCenter(latLng);
    map.setZoom(12);
    var marker = new google.maps.Marker({
            map: map,
            position: latLng,
            title: 'Why, there you are!'
    });
    // And reverse geocode.
    (new google.maps.Geocoder()).geocode({latLng: latLng}, function(resp) {
                  var place = "You're around here somewhere!";
                  if (resp[0]) {
                          var bits = [];
                          for (var i = 0, I = resp[0].address_components.length; i < I; ++i) {
                                  var component = resp[0].address_components[i];
                                  if (contains(component.types, 'political')) {
                                          bits.push('<b>' + component.long_name + '</b>');
                                        }
                                }
                                if (bits.length) {
                                        place = bits.join(' > ');
                                }
                                marker.setTitle(resp[0].formatted_address);
                        }
          });
  }

  function contains(array, item) {
          for (var i = 0, I = array.length; i < I; ++i) {
                  if (array[i] == item) return true;
                }
                return false;
        }
</script>
</head>
<body onload="initialise()">
<?php getHeader(); ?>
<div class="container">
	<div class="td-first" style="padding-top: 25px; font-size: 25px;">Do you recognize your place?</div>
  <div class="content" style="margin-top: -40px;">
<div id="map_canvas" style="width: 100%; height: 300px; margin-top=-20px;">Earth map</div>
<div id="mars_canvas" style="width: 100%; height: 300px;position:relative">Mars map</div>
</div>
<aside class="sidebar1" style="margin-top: -15px;">
    <p>
	You can see how different Mars looks than the Earth. The conditions are severe: you can die within minutes without any special equipment. But there are plans (and some of them are proving to be really good) that in the future, the Red planet can offer a new home for humanity. Researching the weather on Mars now, we will be able to predict it and make one more step towards expanding our knowledge boundaries and exploring new worlds.
	<p/><p>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
      <a class="twitter-timeline"  href="https://twitter.com/MarsCuriosity"  data-widget-id="325376454584041473">Tweets by @MarsCuriosity</a> 
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
    <!-- end .sidebar1 --></aside>
  <!-- end .container --></div>
<div id="mars"></div>
<script>initialize();</script>
</body>
</html>